<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
	href="${pageContext.request.contextPath}/css/jquery.dataTables.min.css"
	type="text/css" rel="stylesheet" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/font-awesome.min.css">

<title>Title</title>
</head>
<body>
	<!-- 面板 -->
	<div class="panel panel-default">
		<!-- 面板头-->
		<input type="text" name="tname" /> <input type="button" value="查询"
			id="search" /> <a class="btn btn-info" id="add_btn">增加</a>

		<button type="button" float="right" class="btn btn-danger"
			id="tenements_del_btn">批量删除</button>
	</div>
	<div style="width: 1000px; margin: 20px auto">
		<table
			class="table table-bordered table-striped table-hover table-condensed"
			style="width: 1000px; margin: 20px auto" id="tenementsTable">
			<thead>
				<tr>
					<th>全选</th>
					<th>租赁编号</th>
					<th>租户id</th>
					<th>租赁姓名</th>
					<th>租赁年龄</th>
					<th>租赁电话</th>
					<th>紧急联系人姓名</th>
					<th>紧急联系人电话</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
	<!-- 增加详情 -->
	<div class="modal fade" id="tenementAddInfoModal" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">增加详情</h4>
				</div>
				<div class="modal-body">
					<!--                 <p class="text-center"> 你好，这里是详情</p> -->
					<form class="form-horizontal" role="form" id="add_tenement_form">
						
						<div class="form-group">

							<label for="tenement_id" class="col-sm-3 control-label">租户id:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="tenement_id"
									placeholder="请输入租户id" name="tenement_id">
							</div>
						</div>
						<div class="form-group">

							<label for="rf_id" class="col-sm-3 control-label">租赁合同编号:</label>
							<div class="col-sm-9">
								<select id="addrf_id" class="form-control" name="rf_id">
								</select>

							</div>
						</div>
						<div class="form-group">

							<label for="tenement_name" class="col-sm-3 control-label">租户姓名:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="tenement_name"
									placeholder="请输入租户姓名" name="tenement_name">
							</div>
						</div>
						<div class="form-group">

							<label for="tenement_age" class="col-sm-3 control-label">租户年龄:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="tenement_age"
									placeholder="请输入租户年龄" name="tenement_age">
							</div>
						</div>
						<div class="form-group">

							<label for="tenement_phone" class="col-sm-3 control-label">租户电话:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="tenement_phone"
									placeholder="请输入租户电话" name="tenement_phone">
							</div>
						</div>
						<div class="form-group">
							<label for="tenement_emergency_contact" class="col-sm-3 control-label">紧急联系人姓名:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="tenement_emergency_contact"
									placeholder="请输入紧急联系人姓名" name="tenement_emergency_contact">
							</div>
						</div>
						<div class="form-group">
							<label for="tenement_emergency_contact_phone" class="col-sm-3 control-label">紧急联系人电话:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="tenement_emergency_contact_phone"
									placeholder="请输入紧急联系人电话" name="tenement_emergency_contact_phone">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="add_tenement_btn">确定</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 增加详情结束 -->
	
	<!-- 修改模态框 -->
	<div class="modal fade" id="updateInfoModal" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myupdateModalLabel">修改信息</h4>
				</div>
				<div class="modal-body">
					<p class="text-center">修改</p>
					<form class="form-horizontal" role="form" id="update_tenement_form">
						<div class="form-group">

							<label for="t_id" class="col-sm-3 control-label">租户序号:</label>
							<div class="col-sm-9">
								<input type="text" readonly class="form-control" id="t_id2"
									  name="t_id">
							</div>
						</div>
						<div class="form-group">

							<label for="tenement_id" class="col-sm-3 control-label">租户id:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="tenement_id2"
									placeholder="请输入租户id" name="tenement_id">
							</div>
						</div>
						<div class="form-group">

							<label for="rf_id" class="col-sm-3 control-label">租赁合同编号:</label>
							<div class="col-sm-9">
								<select id="updaterf_id" class="form-control" name="rf_id">
								</select>

							</div>
						</div>
						<div class="form-group">

							<label for="tenement_name" class="col-sm-3 control-label">租户姓名:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="tenement_name2"
									placeholder="请输入租户姓名" name="tenement_name">
							</div>
						</div>
						<div class="form-group">

							<label for="tenement_age" class="col-sm-3 control-label">租户年龄:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="tenement_age2"
									placeholder="请输入租户年龄" name="tenement_age">
							</div>
						</div>
						<div class="form-group">

							<label for="tenement_phone" class="col-sm-3 control-label">租户电话:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="tenement_phone2"
									placeholder="请输入租户电话" name="tenement_phone">
							</div>
						</div>
						<div class="form-group">
							<label for="tenement_emergency_contact" class="col-sm-3 control-label">紧急联系人姓名:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="tenement_emergency_contact2"
									placeholder="请输入紧急联系人姓名" name="tenement_emergency_contact">
							</div>
						</div>
						<div class="form-group">
							<label for="tenement_emergency_contact_phone" class="col-sm-3 control-label">紧急联系人电话:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="tenement_emergency_contact_phone2"
									placeholder="请输入紧急联系人电话" name="tenement_emergency_contact_phone">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary"
						id="updateTenement_Info_btn">确定</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 修改结束 -->
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript">
		//dataTable
		$(function() {
			// houseInfoDisplay();
			datatable();
			addtenement();
			geth_idoptions();
			UpdatetenementInfo();
			deletetenements();
			getRf_idOptions();
		})

		function datatable() {

			$("#search").click(function() {

				var table = $('#tenementsTable').DataTable();

				table.ajax.reload();

			});

			$("#tenementsTable")
					.DataTable(
							{
								// 是否允许检索
								"searching" : false,

								// 初期排序列
								//"order": [[0,'asc'],[1,'desc']],
								// 是否显示情报 就是"当前显示1/100记录"这个信息
								"info" : true,
								// 是否允许翻页，设成false，翻页按钮不显示
								"paging" : true,

								// 件数选择功能 默认true
								"lengthChange" : true,
								// 件数选择下拉框内容
								"lengthMenu" : [ 5, 10, 15 ],
								// 每页的初期件数 用户可以操作lengthMenu上的值覆盖
								"pageLength" : 5,
								//翻页按钮样式
								// numbers:数字
								// simple:前一页，后一页
								// simple_numbers:前一页，后一页，数字
								// full:第一页，前一页，后一页，最后页
								//full_numbers:第一页，前一页，后一页，最后页，数字
								//first_last_numbers:第一页，最后页，数字
								"pagingType" : "full_numbers",
								// 行样式应用 指定多个的话，第一行tr的class为strip1，第二行为strip2，第三行为strip3.
								// 第四行以后又开始从strip1循环。。。 如果想指定成斑马条状，这里的class必须指定为2个。
								//  "stripeClasses": ['strip1', 'strip2'],
								// 自动列宽
								// "autoWidth": true,
								// 是否表示 "processing" 加载中的信息，这个信息可以修改
								"processing" : true,
								// 每次创建是否销毁以前的DataTable,默认false
								"destroy" : false,
								// 控制表格各种信息的表示位置（比较复杂） 默认:lfrtip
								// 具体参考：https://datatables.net/reference/option/dom
								//"dom": 'lrtip',
								"language" : {
									"processing" : "数据正在读取中",
									// 当前页显示多少条
									"lengthMenu" : "每页显示 _MENU_项",
									// _START_（当前页的第一条的序号） ,_END_（当前页的最后一条的序号）,_TOTAL_（筛选后的总件数）,
									// _MAX_(总件数),_PAGE_(当前页号),_PAGES_（总页数）
									"info" : "_PAGE_/_PAGES_ 共_TOTAL_",
									// 没有数据的显示（可选），如果没指定，会用zeroRecords的内容
									"emptyTable" : "无内容",

									// 千分位的符号，只对显示有效，默认就是","  一般不要改写
									//"thousands": "'",
									// 小数点位的符号，对输入解析有影响，默认就是"." 一般不要改写
									//"decimal": "-",
									// 翻页按钮文字控制
									"paginate" : {
										"first" : "首页",
										"last" : "尾页",
										"next" : "下一页",
										"previous" : "上一页"
									}

								},
								// 默认是false
								// 如果设为true，将只渲染当前也的html，速度会很快，但是通过API就访问不到所有页的数据，有利有弊
								//"deferRender": false,
								// 服务器端处理方式
								"serverSide" : true,

								// ajax选项 可以直接简单指定成请求的文件
								//"ajax": "data.json",
								// 也可以用对象来配置，更加灵活
								"ajax" : {
									// url可以直接指定远程的json文件，或是MVC的请求地址 /Controller/Action
									url : "${pageContext.request.contextPath}/tmc/list",
									type : 'POST',
									// 传给服务器的数据，可以添加我们自己的查询参数
									data : function(param) {
										//param.opportunityNO = $('#txtSearch').val();
										//rolename是自己定义的，
										param.rolename = $(":text[name=tname]")
												.val();
										//param.***=$(":text[name=rname]").val();
										return param;
									},
								//用于处理服务器端返回的数据。 dataSrc是DataTable特有的
								/*dataSrc: function (myJson) {
								
								    alert(JSON.stringify(myJson));
								    return myJson.data;
								}*/
								},
								//指定用于行ID的属性名 默认是：DT_RowId
								"rowId" : 't_id',
								// 列定义
								"columns" : [ {
									"data" : ""
								}, {
									"data" : "rf_id"
								}, {
									"data" : "tenement_id"
								}, {
									"data" : "tenement_name"
								}, {
									"data" : "tenement_age"
								}, {
									"data" : "tenement_phone"
								}, {
									"data" : "tenement_emergency_contact"
								}, {
									"data" : "tenement_emergency_contact_phone"
								}, {
									"data" : ""
								},
								//   { "data": ""},
								],
								columnDefs : [
										{
											targets : [8],
											render : function(data, type, row,
													meta) {
												// alert(row.id);

												return "<button class='btn btn-danger btn-xs' name='del_tenement_btn'>删除</button>&nbsp<button class='btn btn-success btn-xs' name='update_tenementInfo_btn'>修改</button>";
											}
										},

										{
											targets : [ 0 ],
											render : function(data, type, row,
													meta) {
												// alert(row.id);
												return "<input type=checkbox   value='"+row.t_id+"' name='tenementId'/>";
											}
										}

								]

							});
			
			//给删除按钮加事件
			$('#tenementsTable tbody')
					.on(
							'click',
							'tr  [name=del_tenement_btn]',
							function(e) {
								//得到所处行的id
								var t_id = $(this).parents('tr')[0].id;
								$
										.ajax({
											url : "${pageContext.request.contextPath}/tmc/deletetenementByid",
											type : "post",
											//dataType: "json",

											async : true,
											data : {
												"t_id" : t_id
											},
											error : function() {
												alert("删除有误！！！");
											},
											success : function(data) {
												alert(data);
												$('#tenementsTable').DataTable().ajax
														.reload();
											}
										})
							});

			//给修改按钮加事件，得到选择的id
			$('#tenementsTable tbody')
					.on(
							'click',
							'tr  [name=update_tenementInfo_btn]',
							function(e) {
								// $("[name=update_tenementInfo_btn]").click(function(){

								var t_id = $(this).parents('tr')[0].id;
								
								$
								.ajax({
									url : "${pageContext.request.contextPath}/tmc/getTenency",
									type : "post",

									error : function() {
										alert("获取租赁信息有误！！！");
									},
									success : function(data) {
										// console.log(data);
										var array = JSON.parse(data);
										// console.log(array);
										if (array.length > 0) {
											for (var i = 0; i < array.length; i++) {
												var vid = array[i].rf_id;
												var $optionItem = $("<option ></option>");
												$optionItem.attr(
														"value", vid);
												$optionItem.text(vid);
												$("#updaterf_id").append(
														$optionItem);

											}
										}
										//$("#addh-id");
										//
										//$optionItem.attr("value",);

									}

								});

								$
										.ajax({
											url : "${pageContext.request.contextPath}/tmc/getTenementByid",
											type : "post",
											async : true,
											dataType : "json",
											data : {
												"t_id" : t_id
											},
											error : function() {
												alert("修改" + t_id + "有误")
											},
											success : function(data) {
												//alert(data);
												$("#t_id2").val(data.t_id);
												$("#tenement_id2").val(data.tenement_id);
												$("#tenement_name2").val(data.tenement_name);
												$("#tenement_age2").val(data.tenement_age);
												$("#tenement_phone2").val(
														data.tenement_phone);
												$("#tenement_emergency_contact2").val(
														data.tenement_emergency_contact);
												$("#tenement_emergency_contact_phone2").val(
														data.tenement_emergency_contact_phone);
												
												$('#updateInfoModal').modal(
														'show');
											}
										})

							});

		}

		//修改
		function UpdatetenementInfo() {
			$("#updatetenement_Info_btn")
					.click(
							function() {

								$
										.ajax({
											url : "${pageContext.request.contextPath}/tmc/UpdatetenementInfo",
											type : "post",
											async : true,
											data : $("#update_tenement_form")
													.serialize(),
											error : function() {
												alert("修改失败！！！");
											},
											success : function(data) {
												alert(data);
												//隐藏模态框
												$('#updateInfoModal').modal(
														'hide');
												$('#tenementsTable').DataTable().ajax
														.reload();
											}
										})
							});
		}

		function deletetenements() {
			//给批量删除按钮加事件，得到选择的id
			$('#tenements_del_btn')
					.click(
							function() {
								$(":checkbox[name=tenementId]:checked")
										.each(
												function() {

													//   alert($(this).val())
													var t_ids = [];
													$(
															":checkbox[name=tenementId]:checked")
															.each(
																	function() {
																		t_ids
																				.push($(
																						this)
																						.val());
																	});

													if (t_ids == "") {
														alert("请至少选择一个");
														return;
													}
													if (!confirm("是否要删除"
															+ t_ids + "?")) {
														return;
													}

													$
															.ajax({
																url : "${pageContext.request.contextPath}/tmc/deleteTenementsById",
																type : "post",
																//dataType: "json",

																async : true,
																data : {
																	"t_ids" : t_ids
																			.join(",")
																},
																error : function() {
																	alert("删除有误！！！");
																},
																success : function(
																		data) {
																	alert(data);

																}
															});

												});
								$('#tenementsTable').DataTable().ajax.reload();

							});
		}
		//获取增加房屋信息
		function getRf_idOptions() {
			$.ajax({
				url : "${pageContext.request.contextPath}/tmc/getTenency",
				type : "post",

				error : function() {
					alert("获取租赁信息有误！！！");
				},
				success : function(data) {
					// console.log(data);
					var array = JSON.parse(data);
					// console.log(array);
					if (array.length > 0) {
						for (var i = 0; i < array.length; i++) {
							var vid = array[i].rf_id;
							var $optionItem = $("<option></option>");
							$optionItem.attr("value", vid);
							$optionItem.text(vid);
							$("#addrf_id").append($optionItem);

						}
					}
					//$("#addh-id");
					//
					//$optionItem.attr("value",);

				}

			})

		}
		function geth_idoptions() {
			$("#add_btn").click(function() {
				$('#tenementAddInfoModal').modal('show');

			})
		}
		//添加
		function addtenement() {
			$("#add_tenement_btn").click(function() {
				$.ajax({
					url : "${pageContext.request.contextPath}/tmc/addtenement",
					type : "post",
					data : $("#add_tenement_form").serialize(),
					error : function() {
						alert("增加信息有误！！！");
					},
					success : function(data) {
						alert("增加成功！！！");
						$('#tenementAddInfoModal').modal('hide');
						$("#rf_id").val("");
						$("#tenement_id").val("");
						$("#tenement_name").val("");
						$("#tenement_age").val("");
						$("#tenement_phone").val("");
						$("#tenement_emergency_contact").val("");
						$("#tenement_emergency_contact_phone").val("");
						$('#tenementsTable').DataTable().ajax.reload();
					}
				})
			})

		}
	</script>
</body>
</html>
